<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		*{
			margin: 0;
			font-size: 16px;
			letter-spacing: 3px;
			font-family: "microsoft yahei";
		}
		body{
			background-color: #333;
		}		
		#inp,#btn,#inp1{
			border: none;
			outline: none;
			margin: 20px;
			background-color: #999;
			color: #fff;
			border-radius: 20px;
			text-align: center;	
			width: 80px;
			height: 50px;
		}
		#btn{
			background-color: #333;
		}
		#inp{
			margin-left: 500px;
		}
		#btn{
			height: 54px;
		}
		#show{
			width:400px;
			margin: 0 auto;
			color: #aaa;
		}
		#show .first{
			width: 160px;
		}
		span,i{
			display: inline-block;
			width: 105px;
			height: 30px;
			margin-left: 30px;
			padding-left: 15px;
			text-align: center;
			color:mediumaquamarine;
		}
		i{
			width: 120px;
			padding-left: 0;
			color:  deepskyblue;
		}
		span{
			color: springgreen;
			font-weight: bold;
		}
		p{
			line-height: 30px;
		}
	</style>
</head>
<body>
	<input type="text" id="inp" />
	<input type="text" id="inp1" />
	<button id="btn">查线路</button>	
	<div id="show"></div>
	<script>
		var inp = document.getElementById("inp");
		var inp1 = document.getElementById("inp1");
		var btn = document.getElementById("btn");
		var show = document.getElementById("show");
		function shows(data){
			//	console.log(data);   //本行供测试使用
			var reason = data.reason;	//返回结果
			if(reason != "success"){
				inp.value = "";
				inp1.value = "";
				show.innerHTML = "";
				alert("Sorry!数据库暂未收录\n我们将不断更新！");
			}else{	
				var html = "";
				var staname 		= data.result[0].name;    				//线路名称
				var company 		= data.result[0].company;  				//公交线路所属公司
				var front_name	 	= data.result[0].front_name; 		//首发站名称
				var terminal_name 	= data.result[0].terminal_name;	//终点站名称
				var start_time 		= data.result[0].start_time.slice(0,2)+":"+
										data.result[0].start_time.slice(2); 		//早班车时间
				var end_time 		= data.result[0].end_time.slice(0,2)+":"+
										data.result[0].end_time.slice(2); 			//末班车时间
				var length 			= parseFloat(data.result[0].length).toFixed(3); 	//线路总程
				var total 			= data.result[0].stationdes.length;
				html += "<p>"+staname+"</p><p><i class='first'>所属公交公司:</i>"+
							company+"</p><p><i>首发站:</i>"+
							front_name+"</p><p><i>终点站:</i>"+
							terminal_name+"</p><p><i>早班车时间:</i>"+
							start_time+"</p><p><i>末班车时间:</i>"+
							end_time+"</p><p><i>线路总程:</i>"+
							length+"km</p><p><i>全程共:</i>"+
							total+"站</p>";
				for(var i = 0; i < total; i++){
					var sta = data.result[0].stationdes[i].stationNum;
					var _name = data.result[0].stationdes[i].name;
					html += "<span>第"+sta+"站:</span>"+_name+"<br>";		//第几站：途径站点
				}
				show.innerHTML = html;
			}
		}
		btn.onclick = function(){		//动态创建script标签。
			var script = document.createElement("script");
			script.src = "http://op.juhe.cn/189/bus/busline?"+
						"key=40bfefaea964d5fc943e7a67c398d66c&city="+
						inp.value+"&bus="+inp1.value+"&dtype=jsonp&callback=shows";
			document.body.appendChild(script);
		}
	</script>
</body>
</html>